<template>
	<view class="oa-notice-detail" v-show="ishow">
		<view class="cu-bar bg-white solid-bottom">
			<view class="action text-xxl text-bold " style="height:auto;min-height: 90px;font-size:16px">
				{{meeting.name}}
			</view>

		</view>
		<!-- <view class="padding bg-white">
			<view class="action">
				{{meeting.minutes}}
			</view> 
			 <view class="justify-between" style="display: flex;padding-top: 20upx;">
				<view class="cu-capsule round">
					<view class='cu-tag bg-blue '>
						进行中
					</view>
					<view class="cu-tag  ">
						1
					</view>
				</view>
				<view class="cu-capsule round">
					<view class='cu-tag bg-green '>
						已完成
					</view>
					<view class="cu-tag  ">
						31
					</view>
				</view>
				<view class="cu-capsule round">
					<view class='cu-tag  bg-pink'>
						超时
					</view>
					<view class="cu-tag  ">
						2
					</view>
				</view>

				<view class="cu-capsule round">
					<view class='cu-tag bg-red  '>
						未开始
					</view>
					<view class="cu-tag  ">
						3
					</view>
				</view>
			</view> 

		</view> -->


		<template v-for="(agenda,index) in meeting.agendas">
			<view class="cu-bar bg-white solid-bottom margin-top"
				style="margin-top:20px;border-top: #0081FF solid 2px;">
				<view class="action sub-title arrow">

					<text class="text-xl text-bold text-blue"> 任务{{index+1}}</text>
					<text class="bg-blue" style="width:2rem"></text>
					<!-- last-child选择器-->
				</view>
				<view class="action">
		<!-- 			<text class="cuIcon-refresh margin-right-xs"></text>
					<text class="margin-right-xs">{{agenda.state=='创建'?'未开始':agenda.state}}</text> -->
				</view>

				<view class="action">

					<text class="cuIcon-time margin-right-xs"></text>
					<text class="margin-right-xs">{{agenda.executive_end_data}} 截止</text>
				</view>

			</view>

			<view class="content padding-tb-sm  bg-white padding">
				<view class="text-bold">
					<text class=" cuIcon-commentfill text-blue text-xl margin-right-xs"></text> {{agenda.name}}
				</view>
			</view>

			<!-- <view class="padding text-center">
            	<text class="text-black">落实情况</text>
            </view> -->

			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-friend text-blue margin-right-xs"></text> 未落实部门：
						</view>
						<view class="text-gray text-sm" v-for="task in agenda.tasks" v-if="task.state!='已完成'">
                            {{task.taskable.name}}
						</view>
                        <view class="text-gray text-sm" v-else>
                            无
                        </view>
						<view class="text-gray text-sm">

						</view>
					</view>
                    
					<view class="action">
						<view class="cu-avatar-group">
							<!-- <view class="cu-avatar round sm"
								style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
							</view> -->
							<!-- <view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
                            	<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view> -->

						</view>
					<!-- 	<text class="text-grey text-sm">共{{agenda.tasks.length}}部门 参与落实</text> -->
					</view>
				</view>

				<!-- <view class="padding" v-if="(agenda.state!='创建')">已落实情况：</view> -->
				<template v-for="(task,i) in agenda.tasks">
                    <view class="padding" v-if="task.state=='已完成'"> 已落实情况：</view>
					<template v-for="(action,index) in task.actions">
						<view class="cu-item" :class="!menuArrow?'arrow':''">
							<view class="content padding-tb-sm">
								<view>
									<text class="text-grey text-xl">{{action.content}}</text>

								</view>
                                 <view >
                                     <template v-for="i in action.images" >
                                        <image v-if="i!=null"  :src="i"></image>
                                     </template>
                                 </view>

								<view class="text-gray text-sm">


									<text class=" text-sm margin-right-xs">

										填报人: <text
											class="cuIcon-friend  margin-right-xs"></text>
                                            {{ action.user.name }}({{ action.user.department.name }})</text>
									<text class=" text-sm margin-right-xs">
										填报时间: <text class="cuIcon-time  margin-right-xs"></text>
										{{action.updated_at}} </text>

								</view>

							</view>

							<!--  <view class="action">
                                <view class="cu-tag round bg-orange light">{{task.state}}</view>
                                <view class="cu-tag round bg-olive light">电影</view>
                                <view class="cu-tag round bg-blue light">旅行</view>
                            </view> -->
						</view>

					</template>

				</template>
				<!-- <view class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-info text-red margin-right-xs"></text> 未行动落实部门：
						</view>
						<view class="text-gray text-sm">
							信息中心
						</view>
						<view class="text-gray text-sm">

						</view>
					</view>

					<view class="action">
						<button class="cu-btn round " @click="tixing">
							<text class="cuIcon-notice text-red margin-right-xs"></text>
							提醒催办</button>
					</view>

				</view> -->
				<!-- 	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<view class="content">
                			<text class="text-grey">图标 + 标题</text>
                		</view>
                	</view>
                	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<view class="content">
                			<image src="/static/logo.png" class="png" mode="aspectFit"></image>
                			<text class="text-grey">图片 + 标题</text>
                		</view>
                	</view>
                	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<button class="cu-btn content" open-type="contact">
                			<text class="cuIcon-btn text-olive"></text>
                			<text class="text-grey">Open-type 按钮</text>
                		</button>
                	</view>
                	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
                			<text class="cuIcon-discoverfill text-orange"></text>
                			<text class="text-grey">Navigator 跳转</text>
                		</navigator>
                	</view>
                	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<view class="content">
                			<text class="cuIcon-emojiflashfill text-pink"></text>
                			<text class="text-grey">头像组</text>
                		</view>
                		<view class="action">
                			
                		</view>
                	</view>
                	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<view class="content">
                			<text class="cuIcon-btn text-green"></text>
                			<text class="text-grey">按钮</text>
                		</view>
                		<view class="action">
                			<button class="cu-btn round bg-green shadow">
                				<text class="cuIcon-upload"></text> 上传</button>
                		</view>
                	</view>
                	
                	<view class="cu-item" :class="menuArrow?'arrow':''">
                		<view class="content">
                			<text class="cuIcon-warn text-green"></text>
                			<text class="text-grey">文本</text>
                		</view>
                		<view class="action">
                			<text class="text-grey text-sm">小目标还没有实现！</text>
                		</view>
                	</view> -->

			</view>

		</template>
		
		<view class="padding-xl"  v-if="meeting.user.id==storageUser.id">
			<button class="cu-btn block bg-blue margin-tb-sm lg" @click="login">
				<text class="cuIcon-add "></text> 添加任务</button>
		</view>
		
		<view class="article-meta justify-center margin-top " style="display: flex;text-align: center;" v-if="meeting.user != undefined">
			<text >此任务记录由 {{meeting.user.department.name}} {{meeting.user.name}}
			创建于 {{meeting.updated_at}}</text>
		</view>
		<!-- <view class="article-content">
			<oa-parser lazy-load :html="announceDetail.content"></oa-parser>
		</view> -->
	</view>
</template>

<script>
	import oaParser from '@/components/oa-parser';
	export default {
		components: {
			oaParser,
		},
		data() {
			return {
				meeting: {},
				menuArrow: true,
				menuBorder: true,
				menuCard: true,
				ishow:false,
                storageUser:{}
			};
		},

		onLoad(option) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			// console.log(option.id); //打印出上个页面传递的参数。 
			this.initDate(option.id)
		},

		methods: {
			login() {
				this.$mHelper.toast('创建成功');
				this.navTo('/pages/works/agenda/add?id=' + this.meeting.id)
			},
			tixing() {
				this.$mHelper.toast('发送催办成功');
			},
			// 通用跳转
			async navTo(item) {
				this.$mRouter.push({
					route: item
				});
			},

			// 通用跳转
			async navTot(item) {
				console.log(item)
				this.$mRouter.push({
					route: item
				});
			},
			initDate(id) {
				let that = this;

				let user = uni.getStorageSync('user');
                that.storageUser=user
				uni.request({
					method: 'GET',
					url: 'http://nmt.yunshangwulian.vip/api/meetings/' + id + "?api_token=" + user
						.api_token, //仅为示例，并非真实接口地址。
					data: {

					},
					header: {
						'Accept': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(JSON.stringify(res));
						that.meeting = res.data;
						that.ishow = true;

					}
				});
			}
		}


	};
</script>

<style lang="scss">
	.oa-notice-detail {
		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 30upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 30upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}
	}
</style>
